<template lang="html">
  <el-dialog
    width="1000px"
    :title="`${taskId ? '修改' : '新增'}任务`"
    :close-on-click-modal="false"
    :visible="dialogVisible"
    destroy-on-close
    @close="close"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="mt10">
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="ruleForm.taskName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="输入参数" prop="inParam">
                  <span>输入json字符串，特殊值:<font color="red">${curDate} 当前日期</font></span>
                  <el-input v-model="ruleForm.inParam" type="textarea" :rows="2" @change="changeInparam" placeholder="请输入" />
      </el-form-item>
      <el-tabs  v-model="activeTab"  @tab-click="tabClick">
        <el-tab-pane label="数据归集" name="0"> </el-tab-pane>
        <el-tab-pane label="数据清洗" name="1"> </el-tab-pane>
      </el-tabs>
      <div v-show="activeTab === '0'">
          <el-form-item label="数据源" prop="dtId">
                <el-select  v-model="ruleForm.dtId" clearable @change="dtChange">
                       <el-option  v-for="item in dtOps"  :key="item.id" :label="item.dtName"  :value="item.id"/>
                </el-select>
             <el-input v-model="ruleForm.tableNames" type="textarea" :rows="2" ReadOnly />
           </el-form-item>
          <el-form-item label="待处理数据SQL" prop="inData">
              <el-input v-model="ruleForm.inData" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="存放数据表名" prop="odsTableName">
              <el-input v-model="ruleForm.odsTableName" placeholder="请输入 ods_xxx">
                <template #append>
                  <el-input v-model="ruleForm.odsTableRemarks" placeholder="请输入表描述"  style="width: 300px"/>
                </template>
               </el-input>
          </el-form-item>
      </div>
      <div v-show="activeTab === '1' ">
             <el-form-item label="处理内容" prop="content">
                 <el-input v-model="procedureStr"  disabled/>
                 <el-input v-model="ruleForm.content" type="textarea" :rows="10" placeholder="请输入" />
             </el-form-item>
      </div>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitData">确认</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { SaveData, Detail } from "api/dtmg/task";
import { DbTables} from "api/dtmg/datasource";
import dialogMixin from "mixins/dialogMixin";
import rules from "./config/rules";

export default {
  components: {},
  mixins: [dialogMixin],
  props: {
    // 当前行数据
    taskId: {
      type: [String, Number],
      default: "",
    },
    dtOps: {
      type: [],
      default: null,
    },
  },
  data() {
    return {
      ruleForm: {
        taskName: "",
        dtId:"",
        inParam: "",
        inData: "",
        content: "",
        odsTableName:"",
        odsTableRemarks:"",
      },
      rules,
      activeTab: "0",
      procedureStr : "CREATE PROCEDURE doProcedureTask_id(out doNum int) <br/> begin",
    };
  },

  methods: {
    /**
     * 初始化弹窗
     */
    initForm() {
      if (this.taskId) {
        this.getDetail();
      }
    },
    async getDetail() {
      try {
        const data = await Detail(this.taskId);
        Object.assign(this.ruleForm,data);
      } catch (e) {
        console.log(e);
      }
    },
    async dtChange(){
      try {
        if(this.ruleForm.dtId){
          const data = await DbTables(this.ruleForm.dtId);
          this.ruleForm.tableNames = "";
          data.map((item) => {
             const { name,comment } = item;
             this.ruleForm.tableNames += name+(comment?"("+comment+")":"")+"|";
          });
          this.$forceUpdate();
        }

      } catch (e) {
        console.log(e);
      }
    },
    changeInparam(){
      const keys = Object.keys(JSON.parse(this.ruleForm.inParam));
      if(!this.ruleForm.content){
          this.ruleForm.content = "(";
          keys.map(key=>{
               this.ruleForm.content +=  "IN "+key+" varchar(255),";
          })
          this.ruleForm.content += "out doNum int) \n begin  \n\n end;";
      }
    },
    tabClick(){
          if(this.activeTab === "1"){
             this.procedureStr = "CREATE PROCEDURE doProcedureTask_"+this.taskId;
             this.changeInparam();
          }
    },
    /**
     * 提交
     */
    async doSubmit() {
      try {
        const {content, ...rest } = this.ruleForm;
        const cont = content.substring(content.indexOf("begin")+5,content.indexOf("end"));
        if(cont.trim().length ==0 ){
           this.ruleForm.content = "";
        }
        await SaveData({...rest,id:this.taskId,content:this.ruleForm.content});
        this.$message.success(`任务${this.itemId ? "修改" : "新增"}成功`);
        this.$emit("success");
        this.close();
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },

  },
};
</script>
